<template>
	<view>
		<view v-if="skill.video">
			<video style="width: 100%;" autoplay controls show-mute-btn play-btn-position="center"
			 :src="skill.video" :title="skill.title" @ended="completeLearning"></video>
			
			<view style="padding:20rpx;">
				<rich-text :nodes="skill.content"/>
			</view>
		</view>
		<view v-else>
			<uni-title type="h1" align="center" :title="skill.title"></uni-title>
			
			<view style="padding:20rpx;">
				<rich-text :nodes="skill.content"/>
				<button type="primary" style="margin-top: 20rpx;" @click="completeLearning" v-if="status === 'true'">完成学习</button>
			</view>
		</view>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="否" confirmText="是" title="完成学习!" 
				content="是否前往答题页面?" @confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import knowledge from '@/api/modules/knowledge'
	
	export default {
		data() {
			return {
				skill : {},
				status : true, //是否满足学习条件（没有学习并且在学习时间内）
				batchId : '',
			}
		},
		onLoad(options) {
			if ('id' in options) {
				knowledge.getStudySkillsById(options.id).then(res=> {
					this.skill = res.data;
				})
			}
			if('status' in options) {
				this.status = options.status
			}
			if('batchId' in options) {
				this.batchId = options.batchId
			}
		},
		methods: {
			completeLearning() {
				if(this.status === 'true') {
					knowledge.completeLearning(uni.getStorageSync("loginId"),this.batchId).then(res=> {
						this.$refs.alertDialog.open();
					})
				}
			},
			dialogConfirm() {
				uni.navigateTo({
					url: `/pages_duty/common/knowledge/skills/questions?id=${this.skill.id}&batchId=${this.batchId}`
				})
			}
		}
	}
</script>

<style>

</style>
